 <template>
  <div class="main-pd">
    <el-container  style="background: #E9EAEB">
      <el-aside width="20em" style="background: #E9EAEB" >
        <el-menu style="background: #E9EAEB"
                 default-active="$route.path"
                 text-color="#333"
                 active-text-color="#fff"
                 router>
          <el-menu-item index="/task/index/train" class="menuStyle u-f-jsb">
            <img v-show="$route.path == '/task/index/train'" src="./../../assets/image/renwu_peixun_pre.png">
            <img v-show="$route.path != '/task/index/train'" src="./../../assets/image/renwu_peixun_nor.png">
            <span >
            我的培训
            </span>
            <i class="el-icon-arrow-right"/>
          </el-menu-item>
          <el-menu-item index="/task/index/course" class="menuStyle  u-f-jsb">
            <img v-show="$route.path == '/task/index/course'" src="./../../assets/image/renwu_kecheng_pre.png">
            <img v-show="$route.path != '/task/index/course'" src="./../../assets/image/renwu_kecheng_nor.png">
            <span>
             我的课程
            </span>
            <i class="el-icon-arrow-right"/>
          </el-menu-item>
          <el-menu-item index="/task/index/exam" class="menuStyle  u-f-jsb">
            <img v-show="$route.path == '/task/index/exam'" src="./../../assets/image/renwu_kaoshi_pre.png">
            <img v-show="$route.path != '/task/index/exam'" src="./../../assets/image/renwu_kaoshi_nor.png">
            <span >
             我的考试
            </span>
            <i class="el-icon-arrow-right"/>
          </el-menu-item>
          <el-menu-item index="/task/index/event" class="menuStyle  u-f-jsb">
            <img v-show="$route.path == '/task/index/event'" src="./../../assets/image/renwu_kaoshi_pre.png">
            <img v-show="$route.path != '/task/index/event'" src="./../../assets/image/renwu_kaoshi_nor.png">
            <span >
             我的活动
            </span>
            <i class="el-icon-arrow-right"/>
          </el-menu-item>
          <el-menu-item index="/task/index/practice" class="menuStyle  u-f-jsb">
            <img v-show="$route.path == '/task/index/practice'" src="./../../assets/image/renwu_lianxi_pre.png">
            <img v-show="$route.path != '/task/index/practice'" src="./../../assets/image/renwu_lianxi_nor.png">
            <span >
             题库练习
            </span>
            <i class="el-icon-arrow-right"/>
          </el-menu-item>
          <el-menu-item index="/task/index/practice" class="menuStyle  u-f-jsb">
            <router-link to="/register">Register</router-link>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <div class="right-content">
        <router-view />
      </div>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'TaskCenter'
}
</script>

<style  lang="scss"  scoped>
@import 'src/assets/styles/common.scss';
.menuStyle{
  margin:0;
  background: #ffffff;
  border-radius: .3em;
  margin-bottom: 1.3em;
  height: 6.5em;
  display: flex;
  align-items: center;
}

.right-content{
  background-color: #ffffff;
  display: flex;
  margin-left: .4rem;
  flex: 1;
  border-radius: .1rem;
}
.el-menu-item.is-active {
  background-color: $color-main !important;
  color: #fff;
  span {
    color: #fff !important;
  }
}
</style>
